<template>
  <div class="sidebar">
    <div class="menu-bar-container">
      <!-- logo -->
      <div class="logo" :class="collapse ? 'menu-bar-collapse-width' : 'menu-bar-width'" @click="linkdress()">
        <img v-if="collapse" :src="logos" />
        <div>{{ collapse ? "宏恒科技" : appName }}</div>
        <audio id="myaudio" controls="controls" style="width: 1px; height: 1px">
          <source src="./JB.mp3" />
        </audio>
      </div>
      <!-- 导航菜单 -->
      <el-menu
        ref="navmenu"
        default-active="1"
        :class="collapse ? 'menu-bar-collapse-width' : 'menu-bar-width'"
        background-color="#03152A"
        text-color="rgba(255,255,255,.7)"
        active-text-color="#fff"
        :collapse="collapse"
        :collapse-transition="false"
        unique-opened
        @open="handleopen"
        @close="handleclose"
        @select="handleselect"
      >
        <!-- 导航菜单树组件，动态加载菜单 -->
        <menu-tree v-for="item in navTree" :key="item.id" :menu="item"></menu-tree>
      </el-menu>
      <!-- <div>
             <audio id="audio" controls="controls" style="width:1px;height:1px">
               <source src="./JB.mp3">
             </audio>
        </div> -->
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import MenuTree from "@/components/MenuTree";
export default {
  components: {
    MenuTree
  },
  data() {
    return {
      id: "12",
      logos: this.$store.state.title.name.navImg,
      appName: this.$store.state.app.appName,
      user: {}
    };
  },
  computed: {
    ...mapState({
      // appName: state=>state.app.appName,
      // themeColor: state=>state.app.themeColor,
      collapse: (state) => state.app.collapse,
      navTree: (state) => state.menu.navTree,
      warnTimer: (state) => state.tab.warnTimer
    }),
    mainTabs: {
      get() {
        return this.$store.state.tab.mainTabs;
      },
      set(val) {
        this.$store.commit("updateMainTabs", val);
      }
    },
    // 当前激活选中的选项卡
    mainTabsActiveName: {
      get() {
        return this.$store.state.tab.mainTabsActiveName;
      },
      set(val) {
        this.$store.commit("updateMainTabsActiveName", val);
      }
    },
    //默认选择的路由
    onRoutes() {
      return this.$route.path.replace("/", "");
    }
  },
  watch: {
    $route: "handleRoute"
  },
  created() {
    this.user = JSON.parse(sessionStorage.getItem("userInfo"));
    if (this.user.houtai_title && this.user.houtai_title.length > 0) {
      this.appName = this.user.houtai_title;
    }
    this.handleRoute(this.$route);
  },
  mounted() {},
  methods: {
    playmusic() {
      var audio = document.getElementById("myaudio");
      audio.play();
    },
    pasuemusic() {
      var audio = document.getElementById("myaudio");
      audio.pause();
    },
    // 警报定时器
    getWaringmusic() {
      let params = {
        times: "3600000"
      };
      this.$api.warn.sys_check_warning(params).then((res) => {
        if (res.isStopTimer) {
          // 如果isStopTimer为true,则停止计时器
          clearInterval(this.warnTimer);
        }
        if (res.data == true && res.isStopTimer == false) {
          this.playmusic();
          setTimeout(() => {
            this.pasuemusic();
          }, 3000);
        }
      });
    },
    // 连接到展示端
    linkdress() {
      // http://localhost:8082/#/login
      var accountNum = this.$store.state.app.accountNum;
      // console.log("地址",accountNum);

      this.$router.push("/");
    },

    handleopen() {},
    handleclose() {},
    handleselect(a, b) {},
    // 路由操作处理
    handleRoute(route) {
      // tab标签页选中, 如果不存在则先添加
      var tab = this.mainTabs.filter((item) => item.name === route.name)[0];
      if (!tab) {
        tab = {
          name: route.name,
          title: route.name,
          icon: route.meta.icon
        };
        this.mainTabs = this.mainTabs.concat(tab);
      }
      this.mainTabsActiveName = tab.name;
      // 切换标签页时同步更新高亮菜单
      if (this.$refs.navmenu != null) {
        this.$refs.navmenu.activeIndex = "" + route.meta.index;
        this.$refs.navmenu.initOpenedMenu();
      }
    }
  }
};
</script>

<style scoped lang="scss">
// .sidebar{

// }
.menu-bar-container {
  position: fixed;
  top: 0px;
  left: 0;
  bottom: 0;
  z-index: 1020;

  .el-menu {
    position: absolute;
    top: 60px;
    bottom: 0px;
    text-align: left;
    overflow-y: scroll;
    //  overflow-x: none;
    -webkit-scrollbar {
      width: 0 !important;
    }
    // background-color: #2968a30c;
  }
  .el-menu::-webkit-scrollbar {
    width: 0;
  }
  .logo {
    position: absolute;
    top: 0px;
    height: 60px;
    line-height: 60px;
    background: #fff;
    cursor: pointer;
    img {
      width: 40px;
      height: 40px;
      border-radius: 0px;
      margin: 10px 10px 10px 10px;
      float: left;
    }
    div {
      font-size: 25px;
      color: white;
      text-align: left;
      padding-left: 20px;
    }
  }
  .menu-bar-width {
    width: 200px;
    background: rgb(3, 20, 45);
  }
  .menu-bar-collapse-width {
    width: 65px;
  }
}
</style>
<style lang="scss" >
.menu-bar-container {
  .el-menu-item.is-active {
    background-color: #56a9ff !important;
  }
}
</style>
